<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .btn {
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid rgb(214, 210, 210);
        }
    .label{
        margin-right:20px;
    }
        #header-box {
            display: block;
            margin: 0;
            padding: 0;
        }

        .infobox {
            position: absolute;
            width: 80%;
            height: 3em;
            padding: .5em;
            left: 135px;
            display: block;
            font-size: 28pt;
            top: 150px;
        }

        .infobox button {
            margin-top: 35px;
        }

        #footer {
            width: 100%;

        }

        .jumbotron {
            padding-bottom: 0;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 0">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="color: blueviolet">DesignTo</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="homepage.html">首页</a>
                    </li>
                    <li>
                        <a href="theme.html">主题</a>
                    </li>
                    <li class="active">
                        <a href="custom.html">个性化</a>
                    </li>
                </ul>
                <div class="row nav nabbar-nav navbar-right" style="margin-top:.4em">

                    <ul class="col-lg-3">
                        <li>
                            <button type="button" class="btn btn-defualt" onclick="window.location='usercenter_public.html';return false;">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>User
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>


    <div class="jumbotron" style="height:600px;">
        <div class="container-fluid" id="header-box">

            <img src="img/1.jpg" alt="..." style="height:600px;width:100%;position: absolute;">
            <div class="infobox">
                <label style="color: white;font-size:40pt;" class="h2">DesignTo</label>
                <br />
                <label style="color: white;font-size:25pt" class="h4">寻找属于自己的个性化设计！</label>
                <br />
                <button class="btn btn-defualt btn-lg" style="color: white;" onclick="window.location='require_submit.html'"> 提交需求</button>

            </div>
        </div>
    </div>
    <br/>
    <!--列表主体-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="container" style="padding-top:10px;">
                    <!--需求列表组件-->
                    <div class="row">
                        <div class="panel panel-default" style="height:340px;">
                            <!--头像-->
                            <div class="col-md-3" style="display: inline;">
                                <div class="thumbnail">
                                    <img src="img/宠物.jpg" />
                                    <div class="caption text-center">
                                        <h4>USERNAME</h4>
                                    </div>
                                </div>
                            </div>
                            <!--内容-->
                            <div class="col-md-7" style="height:100%;">
                                <div class="container-fluid" style="height:100%">
                                    <!--title-->
                                    <div class="row">
                                        <a href="require_detail.html">
                                            <h2>This is the title.</h2>
                                        </a>
                                    </div>
                                    <!--tags(time and type)-->
                                    <div class="row">
                                        <span class="label label-success">
                                            分类
                                        </span>
                                        <span class="label label-warning">
                                            2018-12-12 00:00:00
                                        </span>
                                    </div>
                                    <!--content-->
                                    <div class="row">
                                        <p>jdkfajk ljbjkje jckjeji jdkjei jclaji cakj jthisi dis tha the wacirjktk djk jthciaq
                                            zjlp fr .</p>
                                    </div>
                                    <!--submitter-->
                                    <div class="row" style="position: absolute;bottom:1em;">
                                        <a href="#">USERNAME</a>
                                        发布于
                                        <label id="submit-time">2018年2月12日19时18分12秒</label>
                                    </div>
                                </div>
                            </div>
                            <!--预算-->
                            <div class="col-md-2">
                                <h2>
                                    <label style="color:red;">¥</label>2000-4000</h2>
                            </div>
                        </div>
                    </div>
                    <!--需求列表组件-->
                    <div class="row">
                            <div class="panel panel-default" style="height:340px;">
                                <!--头像-->
                                <div class="col-md-3" style="display: inline;">
                                    <div class="thumbnail">
                                        <img src="img/宠物.jpg" />
                                        <div class="caption text-center">
                                            <h4>USERNAME</h4>
                                        </div>
                                    </div>
                                </div>
                                <!--内容-->
                                <div class="col-md-7" style="height:100%;">
                                    <div class="container-fluid" style="height:100%">
                                        <!--title-->
                                        <div class="row">
                                            <a href="#">
                                                <h2>This is the title.</h2>
                                            </a>
                                        </div>
                                        <!--tags(time and type)-->
                                        <div class="row">
                                            <span class="label label-success">
                                                分类
                                            </span>
                                            <span class="label label-warning">
                                                2018-12-12 00:00:00
                                            </span>
                                        </div>
                                        <!--content-->
                                        <div class="row">
                                            <p>jdkfajk ljbjkje jckjeji jdkjei jclaji cakj jthisi dis tha the wacirjktk djk jthciaq
                                                zjlp fr .</p>
                                        </div>
                                        <!--submitter-->
                                        <div class="row" style="position: absolute;bottom:1em;">
                                            <a href="#">USERNAME</a>
                                            发布于
                                            <label id="submit-time">2018年2月12日19时18分12秒</label>
                                        </div>
                                    </div>
                                </div>
                                <!--预算-->
                                <div class="col-md-2">
                                    <h2>
                                        <label style="color:red;">¥</label>2000-4000</h2>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-footer text-center" id="footer">
        <h4>DesignTo服装设计服务平台</h4>
        <h5>Designer:
            <span class="glyphicon glyphicon-star" style="color: gold" aria-hidden="true"></span>Star</h5>
    </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="web/static/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="web/static/js/bootstrap.min.js"></script>
    <script src="web/static/js/main.js"></script>
</body>

</html>